<template>
	<div class='dictionary-maintain-container'>
		<div class='left'>
			<vxe-grid ref='leftGridRef' v-bind='leftGridConfig'>
				<template v-slot:form>
					<n-form ref='formRef' v-bind='leftFormConfig' :model='leftGridConfig.formConfig!.data'
							:style='{width:"100%"}'>
						<n-flex justify='space-evenly'>
							<n-form-item label='字典类型名称' path='dictTypeName'>
								<n-input v-model:value='leftGridConfig.formConfig!.data.dictTypeName'
										 placeholder='请输入字典类型' clearable/>
							</n-form-item>
							<n-form-item label='字典类型编码' path='dictTypeCode'>
								<n-input v-model:value='leftGridConfig.formConfig!.data.dictTypeCode'
										 placeholder='请输入字典类型' clearable/>
							</n-form-item>
							<n-form-item>
								<n-flex justify='space-evenly'>
									<n-button type='info' :bordered='false' round
											  @click='initLeftGrid'>
										查询
									</n-button>
									<n-button type='info' :bordered='false' round
											  @click='resetLeftQueryCondition'>
										重置
									</n-button>
								</n-flex>
							</n-form-item>
						</n-flex>
					</n-form>
				</template>
				<template v-slot:toolbar_buttons>
					<n-button round strong @click='showAddDictTypeModal'>
						<template v-slot:icon>
							<ClassIcon icon-class='fa fa-plus'/>
						</template>
						新增字典类型
					</n-button>
				</template>
				<template v-slot:toolbar_tools>
					<div class='vxe-custom--wrapper'>
						<n-button circle @click='initLeftGrid'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-refresh'/>
							</template>
						</n-button>
					</div>
				</template>
				<template v-slot:operate='{ row }'>
					<n-flex justify='space-evenly'>
						<n-button text @click='(event:MouseEvent)=>showEditDictTypeModal(event,row)'
								  alt='编辑字典类型'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-edit'/>
							</template>
						</n-button>
						<n-button text @click='(event:MouseEvent)=>removeDictType(event,row)'
								  alt='删除字典类型'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-remove'/>
							</template>
						</n-button>
					</n-flex>
				</template>
			</vxe-grid>
		</div>
		<div class='right'>
			<vxe-grid ref='rightGridRef' v-bind='rightGridConfig'>
				<template v-slot:form>
					<n-form ref='formRef' v-bind='rightFormConfig' :model='rightGridConfig.formConfig!.data'
							:style='{width:"100%"}'>
						<n-flex justify='space-evenly'>
							<n-form-item label='字典值名称' path='label'>
								<n-input v-model:value='rightGridConfig.formConfig!.data.label'
										 placeholder='请输入字典值名称' clearable/>
							</n-form-item>
							<n-form-item label='字典值' path='value'>
								<n-input v-model:value='rightGridConfig.formConfig!.data.value'
										 placeholder='请输入字典值' clearable/>
							</n-form-item>
							<n-form-item>
								<n-flex justify='center' :style='{width:"100%"}'>
									<n-button type='info' :bordered='false' round
											  @click='initRightGrid'>
										查询
									</n-button>
									<n-button type='info' :bordered='false' round
											  @click='resetRightQueryCondition'>
										重置
									</n-button>
								</n-flex>
							</n-form-item>
						</n-flex>
					</n-form>
				</template>
				<template v-slot:toolbar_buttons>
					<n-button round strong @click='showAddDictValueModal'>
						<ClassIcon icon-class='fa fa-plus'/>&nbsp;&nbsp;新增字典值
					</n-button>
				</template>
				<template v-slot:toolbar_tools>
					<div class='vxe-custom--wrapper'>
						<n-button circle @click='initRightGrid'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-refresh'/>
							</template>
						</n-button>
					</div>
				</template>
				<template v-slot:operate='{ row }'>
					<n-flex justify='space-evenly'>
						<template v-if='"group" === row.dictType'>
							<n-button text
									  @click='(event:MouseEvent)=>showAddChildDictValueModal(event,row.dictDataCode)'
									  alt='添加子字典值'>
								<template v-slot:icon>
									<ClassIcon icon-class='fa fa-plus'/>
								</template>
							</n-button>
						</template>
						<n-button text @click='(event:MouseEvent)=>showEditDictValueModal(event,row)'
								  alt='编辑字典值'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-edit'/>
							</template>
						</n-button>
						<n-button text @click='(event:MouseEvent)=>removeDictValue(event,row)'
								  alt='删除字典值'>
							<template v-slot:icon>
								<ClassIcon icon-class='fa fa-remove'/>
							</template>
						</n-button>
					</n-flex>
				</template>
			</vxe-grid>
		</div>
	</div>
	<LeftAddModal ref='leftAddModalRef' v-bind='leftAddModalConfig'/>
	<LeftEditModal ref='leftEditModalRef' v-bind='leftEditModalConfig'/>
	<RightAddModal ref='rightAddModalRef' v-bind='rightAddModalConfig'/>
	<RightEditModal ref='rightEditModalRef' v-bind='rightEditModalConfig'/>
</template>
<script setup lang='ts'>
import { defineAsyncComponent, onBeforeMount, ref, reactive, watch } from 'vue';
import { VxeGrid } from '@/config/vxe/index.ts';
import useLeftGridHooks from './hooks/left/grid.ts';
import useRightGridHooks from './hooks/right/grid.ts';
// import { Options } from '#/Options.d.ts';
// import { Dict, DictionaryOption } from '#/Dictionary.d.ts';
// import { loadDict } from '@/config/dictionary/dictionary.ts';
// ---------------------------------------------------------------------
const props = defineProps({});
// ---------------------------------------------------------------------
const LeftAddModal = defineAsyncComponent(() => import('./leftAddModal.vue'));
const LeftEditModal = defineAsyncComponent(() => import('./leftEditModal.vue'));
// ---------------------------------------------------------------------
const RightAddModal = defineAsyncComponent(() => import('./rightAddModal.vue'));
const RightAddChildModal = defineAsyncComponent(() => import('./rightAddModal.vue'));
const RightEditModal = defineAsyncComponent(() => import('./rightEditModal.vue'));
// ---------------------------------------------------------------------
const SvgIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/SvgIcon.vue'));
const ClassIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/ClassIcon.vue'));
// ---------------------------------------------------------------------
const leftAddModalRef = ref<InstanceType<typeof LeftAddModal>>();
const leftEditModalRef = ref<InstanceType<typeof LeftEditModal>>();
// ---------------------------------------------------------------------
const rightAddModalRef = ref<InstanceType<typeof RightAddModal>>();
const rightAddChildModalRef = ref<InstanceType<typeof RightAddChildModal>>();
const rightEditModalRef = ref<InstanceType<typeof RightEditModal>>();
// ---------------------------------------------------------------------
const {
		  currentDictType,
		  leftGridRef, leftGridConfig,
		  leftFormConfig,
		  initLeftGrid, resetLeftQueryCondition,
		  showAddDictTypeModal, showEditDictTypeModal, removeDictType
	  } = useLeftGridHooks(props, leftAddModalRef, leftEditModalRef);
const {
		  selectedDictType,
		  rightGridRef, rightGridConfig,
		  rightFormConfig,
		  initRightGrid, resetRightQueryCondition,
		  showAddDictValueModal, showAddChildDictValueModal, showEditDictValueModal, removeDictValue
	  } = useRightGridHooks(props, rightAddModalRef, rightAddChildModalRef, rightEditModalRef);
// ---------------------------------------------------------------------
watch(currentDictType, (newValue, oldValue) => {
	Object.assign(selectedDictType, currentDictType);
	rightGridConfig.formConfig!.data.dictTypeCode = newValue.dictTypeCode;
	initRightGrid();
}, {
	deep      : false,
	immediate : false
});
// ---------------------------------------------------------------------
const leftAddModalConfig = reactive({
	reLoad : () => initLeftGrid()
});
const leftEditModalConfig = reactive({
	reLoad : () => initLeftGrid()
});
// ---------------------------------------------------------------------
const rightAddModalConfig = reactive({
	reLoad : () => initRightGrid()
});
const rightEditModalConfig = reactive({
	reLoad : () => initRightGrid()
});
// ---------------------------------------------------------------------
onBeforeMount(() => {
	/*initDict();*/
});
// ---------------------------------------------------------------------
</script>
<style scoped lang='scss'>
.dictionary-maintain-container{
	box-sizing    :border-box;
	margin        :0;
	padding       :0;
	border        :0;
	height        :100%;
	width         :100%;
	display       :flex;
	flex-flow     :row nowrap;
	place-content :flex-start flex-start;
	place-items   :center center;
	place-self    :center center;
	.left{
		box-sizing :border-box;
		margin     :0;
		padding    :0;
		border     :0;
		height     :100%;
		width      :50%;
	}
	.right{
		box-sizing :border-box;
		margin     :0;
		padding    :0;
		border     :0;
		height     :100%;
		width      :50%;
	}
}
</style>